<script setup lang="ts">
import {useInterfaceInfoStoreHook} from "@/store/modules/interfaceInfo";
import {message} from "@/utils/message";
import {markRaw, onMounted, Ref, ref} from "vue";
import {interfaceInfoInvoke} from "@/api/interfaceInfo";

defineOptions({
  name: "InterfaceDetails"
});

const interfaceInfoStore = useInterfaceInfoStoreHook().interfaceInfo;

const result = ref<string>("");

const paramsData = ref<string>("");

const onFinish = async () => {
  // 检查是否存在接口id
  if (!interfaceInfoStore.id) {
    message('接口不存在', {type: "error"});
    return;
  }
  try {
    // 发起接口调用请求，传入一个对象作为参数，这个对象包含了id和values的属性，
    // 其中，id 是从 params 中获取的，而 values 是函数的参数
    const res = await interfaceInfoInvoke({
      id: interfaceInfoStore.id,
      userRequestParams: paramsData.value
    });
    result.value = res.data;
    paramsData.value = "";
    console.log("==================================================")
    console.log(res);
    if (res.code == 0){
      message('请求成功', {type: "success"});
    }else {
      message(res.message, {type: "error"});
    }
  } catch (error: any) {
    message('操作失败，请稍后重试！', {type: "error"});
  }
};
</script>

<template>
  <div>
    <h2 style="margin-bottom: 20px">接口详情: </h2>
    <el-card v-if="interfaceInfoStore" class="interfaceInfoCard" shadow="hover">
      <div>接口名称: {{ interfaceInfoStore.name }}</div>
      <div>接口描述: {{ interfaceInfoStore.description }}</div>
      <div><span style="color: green;font-size: 30px">{{ interfaceInfoStore.method }}</span> :
        {{ interfaceInfoStore.url }}
      </div>
      <div>请求参数: {{ interfaceInfoStore.requestParams }}</div>
      <div>请求头: {{ interfaceInfoStore.requestHeader }}</div>
      <div>响应头: {{ interfaceInfoStore.responseHeader }}</div>
      <div>创建时间: {{ interfaceInfoStore.createTime }}</div>
      <div>更新时间: {{ interfaceInfoStore.updateTime }}</div>

      <el-divider/>

      <el-form label-position="top">
        <el-form-item label="调试">
          <el-input style="width: 700px;" type="textarea" v-model="paramsData" placeholder='{"username": "哈哈哈", "password": "123" }'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onFinish">发送</el-button>
        </el-form-item>
      </el-form>

      <el-divider/>

      <div style="margin-top: 40px">
        <span>结果展示</span>
        <div style="margin-top: 20px">{{ result }}</div>
      </div>
    </el-card>

    <el-card v-else style="width: 100%;" shadow="hover">
      <el-empty description="不存在该接口">
        <el-button type="primary" @click="$router.push({ path: '/' })">回到主页</el-button>
      </el-empty>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.interfaceInfoCard div {
  margin-bottom: 10px;
}
</style>
